/* 提供常用flex类名 */

$listFlexModelPrimary: (
  (start, flex-start),
  (center, center),
  (end, flex-end),
  (between, space-between),
  (around, space-around)
);

$listFlexModelSecondary: ((start, flex-start), (center, center), (end, flex-end));

/*
    exp: flex-around flex-start-center flex-col-between-end
*/
@each $valueP in $listFlexModelPrimary {
  .flex-#{nth($valueP, 1)} {
    display: flex;
    justify-content: nth($valueP, 2);
  }

  .flex-col-#{nth($valueP, 1)} {
    display: flex;
    flex-direction: column;
    justify-content: nth($valueP, 2);
  }

  @each $valueS in $listFlexModelSecondary {
    .flex-#{nth($valueP, 1)}-#{nth($valueS, 1)} {
      display: flex;
      justify-content: nth($valueP, 2);
      align-items: nth($valueS, 2);
    }

    .flex-col-#{nth($valueP, 1)}-#{nth($valueS, 1)} {
      display: flex;
      flex-direction: column;
      justify-content: nth($valueP, 2);
      align-items: nth($valueS, 2);
    }
  }
}

/* 缩写 */
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
